import React from "react";
import { useNavigate } from "react-router-dom";
import "./FeatureButtons.css";
import { Alert } from "antd";
import Marquee from "react-fast-marquee";
import tu1 from "../../assets/img/e1d3148755db57f4fb88c06046b5b878.png";
import tu2 from "../../assets/img/9c8aa05e58ac25d1ee1ff2286c093554.png";
import tu3 from "../../assets/img/007f924c9aa9747c0e3c518cad7f1b3b.png";

interface FeatureButton {
  img: any;
  title: string;
  description: string;
  path: string;
}

const featureButtons: FeatureButton[] = [
  {
    img: tu3,
    title: "预约挂号",
    description: "30W+专家入驻",
    path: "/appointment"
  },
  {
    img: tu1,
    title: "极速问诊",
    description: "平均3分钟接诊",
    path: "/quickconsultation"
  },
  {
    img: tu2,
    title: "复诊开方",
    description: "慢病续方送到家",
    path: "/mainbox"
  },
];

const FeatureButtons: React.FC = () => {
  const navigate = useNavigate();

  const handleClick = (path: string) => {
    navigate(path);
  };

  return (
    <>
      <Alert
        banner
        message={
          <Marquee pauseOnHover gradient={false}>
            I can be a React component, multiple React components, or just some
            text.
          </Marquee>
        }
      />
      <div className="feature-buttons">
        {featureButtons.map((button, index) => (
          <div
            key={index}
            className={`button-item ${index === 0 ? "first-button-item" : ""}`}
            onClick={() => handleClick(button.path)}
            style={{ cursor: "pointer" }}
          >
            <img src={button.img} alt={button.title} />
            <h3>{button.title}</h3>
            <p>{button.description}</p>
          </div>
        ))}
      </div>
    </>
  );
};

export default FeatureButtons;
    